<template>
    <div>
        <el-row>
            <el-col :span="12">
                <div style="width:100%;height:300px;background-color:blue">
                </div>
            </el-col>
            <el-col :span="12">
                <div style="width:100%;height:300px;background-color:red">
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button>el独特的按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>

                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>

                <el-button type="primary" plain round>主要按钮</el-button>
                <el-button type="success" plain round>成功按钮</el-button>
                <el-button type="info" plain round>信息按钮</el-button>
                <el-button type="warning" plain round>警告按钮</el-button>
                <el-button type="danger" plain round>危险按钮</el-button>
            </el-col>

            <el-col :span="24">  
                <el-button type="primary" icon="el-icon-search" circle></el-button>
                <el-button type="danger" icon="el-icon-edit" circle></el-button>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-col :span="24">
                <el-input style="width:200px;" v-model="value1" placeholder="请输入内容"></el-input>
                <el-input type="textarea" style="width:200px;" v-model="value2" placeholder="请输入内容"></el-input></el-input>
                <el-input clearable style="width:200px;" v-model="value3" placeholder="账号" prefix-icon="el-icon-user"></el-input>
                <el-input style="width:200px;" v-model="value4" placeholder="密码" suffix-icon="el-icon-search"></el-input>

                <el-input show-password style="width:200px;" v-model="password" placeholder="请输入密码"></el-input></el-input>
            </el-col>
        </el-row>
        
        <el-row style="margin-top: 20px;">
            <el-autocomplete style="width:200px;" placeholder="请输入内容" v-model="value5" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable></el-autocomplete>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-select v-model="select1"  @change="changefruits1">
                <el-option value="苹果"></el-option>
                <el-option value="香蕉"></el-option>
                <el-option value="梨子"></el-option>
            </el-select>

            <el-select v-model="select2"  @change="changefruits2" multiple>
                <el-option v-for="item in fruits2" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>

            <el-select v-model="select3"  @change="changeuser" filterable>
                <el-option v-for="item in users" :key="item.idcard" :label="item.label" :value="item.idcard"></el-option>
            </el-select>

        
            <el-radio-group v-model="radio1">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>


            <el-checkbox-group v-model="chicklist">
                <el-checkbox label="篮球"></el-checkbox>
                <el-checkbox label="足球"></el-checkbox>
                <el-checkbox label="游泳"></el-checkbox>
            </el-checkbox-group>

        


        </el-row>

        <el-row style="margin-top: 20px;">
            <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changedata"></el-date-picker>
            <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changedatatime"></el-date-picker>
 
            <el-date-picker v-model="daterange" type="daterange"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期" 
                end-placeholder="结束日期" @change="changedaterange">
            </el-date-picker>
            
 
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-table :data="tabledata" :header-cell-style="{ background:'aliceblue',fontSize:'16px'}">
                <el-table-column prop="id" label="序号" width="140" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
                <el-table-column prop="address" label="地址" align="center"></el-table-column>
                <el-table-column prop="birthday" label="生日" align="center"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>




    </div>
</template>
<script>
export default {
    name: 'Elements',
    data() {
        return {
            tabledata: [
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
                {name:"聂龙",address:"湖北",birthday:"2003-04-01",id:1},
            ],
            value1: '',
            value2: '',
            value3: '',
            value4: '',
            value5: '',
            password: '',
            coffees: [
                {value:'星巴克咖啡'},
                {value:'瑞幸咖啡'},
                {value:'库迪咖啡'}
            ],
            select1: '',
            select2: '',
            select3: '',
            fruits2: [
                {name:"蓝莓",id:1},
                {name:"草莓",id:2},
                {name:"梅子",id:3},
            ],
            users: [
                {label:"张三",idcard:"1273612087390128"},
                {label:"李四",idcard:"1827938298129902"},
                {label:"王五",idcard:"1232979868779878"},
            ],
            radio1: '',
            chicklist:[],
            date:'',
            datetime:'',
            daterange:'',
        }
    },
    methods: {
        edit(row){
            // alert(row.name)
            // this.$message.success(row.name)
            // this.$message.warning(row.name)
            // this.$notify.success(row.name)
            this.$confirm('这是什么吖','提示',{
                type:'warning'
            }).then(()=>{
                this.$message.success('你点击了确定')
            }).catch(()=>{
                this.$message.info('你点击了取消')
            })
        },
        querySearch(query, cb) {
            let result = query ? this.coffees.filter(item => item.value.includes(query)) : this.coffees
            cb(result);
        },
        changefruits1() {
            console.log(this.select1)
        },
        changefruits2() {
            console.log(this.select2)
        },
        changeuser(){
            console.log(this.select3)
        },
        changedata(){
            console.log(this.date)
        },
        changedatatime() {
            console.log(this.datetime)
        },
        changedaterange() {
            console.log(this.daterange)
        },
    }   
}
</script>